<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" type="image/ png" href="/favicon.png" sizes="512x512">
  <title>HiPlayer_demo</title>
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="https://unpkg.com/vue/dist/vue.js" charset="utf-8"></script>
  <script src="js/hiplayer.js"></script>
</head>
<body>
  <div class="row">
    <h1>HiPlayer demo</h1>
    <hr>
    <div class="audio-hide">
      <audio src="/audio/Kelly Clarkson - Catch My Breath.mp3" controls="controls" class="audio-file"></audio>
    </div>
    <div class="player">
      <div class="player-box">
        <div class="box-2 box">
          <img src="http://p4.music.126.net/8rCjkqlIXl5-HjRQPIqrJg==/2510185046278292.jpg" alt="cover">
        </div>
        <div class="box-6 box">
          <span class="cTimeM" v-text="cTimeM"></span>
          <span class="cTimeS" v-text="cTimeS"></span>
          <span class="dTimeM" v-text="dTimeM"></span>
          <span class="dTimeS" v-text="dTimeS"></span>
          <p>{{playStatus}}</p>
          <button type="button" name="button" @click="play" class="button">play</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
